/* 
为什么学习react？
1.组件化开发，将页面拆分成多个文件，每个文件里的代码可读性高
更利于团队协作 
2.react提供了数据绑定，操作数据，减少DOM操作，提高开发的效率
3.react利用虚拟DOM，提高页面的渲染性能
*/

//todo constructor()/render()/componentDidMount()均为生命周期函数

//?使用状态的时候：只要页面变化的内容，一般都要设置状态
/* 
不用设置新的状态的时候:
1.变化的内容可以由现有的状态经过计算得来 
2.变化的内容是从props得来的，父组件传过来的参数
3.只要不是在render函数的jsx对象内的变化，可以不设置状态
*/

import React from "react";
import { changeTime } from "./tool";
//!类组件特有state生命周期
class Content extends React.Component {
    //
    //!只执行一次
    //声明当前组件所需要的变量
    constructor() {
        super();
        //!但凡有状态的量一定要放在状态里面去
        this.state = {
            data: [],
            time: new Date().toLocaleTimeString(),
        };
    }

    //不进行操作，只表明状态,页面加载完成之后自动执行
    componentDidMount() {
        //只执行一次
        console.log(this); //this指类实例化出来的对象
        fetch("https://cnodejs.org/api/v1/topics")
            .then((res) => res.json())
            .then((res) => {
                //!原生写法：比较复杂
                /* let list = document.querySelector("#list");
                for (let i = 0; i < res.data.length; i++) {
                    let li = document.createElement("li");
                    li.innerHTML =
                        "<img src=" +
                        res.data[i].author.avatar_url +
                        ">" +
                        res.data[i].title +
                        "<span>" +
                        res.data[i].reply_count +
                        "</span>";
                    list.appendChild(li);
                }
                document.querySelector("h2").innerHTML =
                    "共有" + res.data.length + "条帖子"; */
                //!react写法：比较简单
                console.log(res);
                this.setState({
                    data: res.data,
                });
            });
        //!setInterval里面一定要写成箭头函数，箭头函数里面没有this
        setInterval(() => {
            this.setState({ time: new Date().toLocaleTimeString() });
        }, 1000);
    }
    //挂载之后自动执行,更新之后也会执行
    //父组件调用setState时调用，参数变化的时候也会调用
    render() {
        return (
            // const {time,data}=this.state;
            <div>
                <h1>{this.state.time}</h1>
                <h2>共有{this.state.data.length} 条帖子</h2>
                <ul id="list">
                    {this.state.data.map((item) => {
                        return (
                            <li key={item.id}>
                                <img
                                    style={{ width: 80 }}
                                    src={item.author.avatar_url}
                                />
                                <span>{item.reply_count}</span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {item.title}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>{changeTime(item.last_reply_at)}</span>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

export default Content;
